<template>
  <div class="leftContainer">
    <div class="leftContainer-point">
      <div class="leftContainer-point-titleBgc">
        <div class="leftContainer-point-titleBgc-leftText">一周安全趋势</div>
      </div>
      <div class="leftContainer-point-content" ref="changeEchart"></div>
    </div>
    <div class="leftContainer-duty">
      <div class="leftContainer-point-titleBgc">
        <div class="leftContainer-point-titleBgc-leftText">今日值班</div>
      </div>
      <div class="leftContainer-duty-content">
        <div class="leftContainer-duty-content-zhi">
          <div class="leftContainer-duty-content-zhi-img"></div>
          <div style="display: flex;flex-direction: column;justify-content: space-between;">
            <div style="font-size: 18px;">4</div>
            <div style="font-size: 14px;">值班</div>
          </div>
        </div>
        <div class="leftContainer-duty-content-zhi">
          <div class="leftContainer-duty-content-zhi-img2"></div>
          <div style="display: flex;flex-direction: column;justify-content: space-between;">
            <div style="font-size: 18px;">0</div>
            <div style="font-size: 14px;">消防</div>
          </div>
        </div>
        <div class="leftContainer-duty-content-zhi">
          <div class="leftContainer-duty-content-zhi-img3"></div>
          <div style="display: flex;flex-direction: column;justify-content: space-between;">
            <div style="font-size: 18px;">6</div>
            <div style="font-size: 14px;">保安</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import "echarts-liquidfill";
// import * as echarts from "echarts/core";
import * as echarts from "echarts";
const changeEchart = ref(null);
const initNobodyEcharts = () => {
  const myEchart = echarts.init(changeEchart.value);
  let option = myEchart.getOption();
  if (option != null) {
    myEchart.clear();
    myEchart.setOption(option);
  }
  //数据
  var XName = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
  var data1 = [67, 97, 51, 338, 32, 11, 1]


  var data = [{
    coords: [
      ['周一', 67],
      ['周二', 97],
      ['周三', 51],
      ['周四', 338],
      ['周五', 32],
      ['周六', 11],
      ['周日', 1],
    ]
  }]

  option = {
    grid: {
      left: '10%',
      top: '5%',
      bottom: '12%',
      right: '2%',
    },
    legend: {
      type: "scroll",
      data: "来电量",
      itemWidth: 18,
      itemHeight: 12,
      textStyle: {
        color: "#00ffff",
        fontSize: 14
      },
    },
    yAxis: [{
      type: 'value',
      position: 'left',
      nameTextStyle: {
        color: '#00FFFF'
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: 'rgba(135,140,147,0.8)'
        }
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false
      },
      axisLabel: {
        formatter: '{value}',
        color: '#fff',
        fontSize: 12
      }
    },],
    xAxis: [{
      type: 'category',
      axisTick: {
        show: false
      },
      axisLine: {
        show: false,
        lineStyle: {
          color: '#0696f9',
        }
      },
      axisLabel: {
        inside: false,
        textStyle: {
          color: '#fff', // x轴颜色
          fontWeight: 'normal',
          fontSize: '12',
          lineHeight: 22
        }

      },
      data: XName,
    },],
    series: [{
      symbolSize: 2,
      name: '小灯光',
      type: "line",
      data: data1,
      itemStyle: {
        normal: {
          borderWidth: 5,
          color: '#00C0FF',
        }
      }
    },

    ],
  };

  myEchart.setOption(option);
}
onMounted(() => {
  initNobodyEcharts()
})
</script>

<style lang="scss" scoped>
.leftContainer {
  display: flex;
  position: absolute;
  right: 17px;
  flex-direction: column;
  padding-top: 37px;
  z-index: 99;
  pointer-events: all;

  &-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 水平居中 */
    cursor: pointer;
    width: 411px;
    height: 297px;
    background-image: url("../../assets/images/home/bg_emphasis.png");
    background-size: 100% 100%;

    &-titleBgc {
      width: 393px;
      height: 37px;
      background-image: url("../../assets/images/home/bg_emphasisTit.png");
      background-size: 100% 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 14px;
      margin-left: 10px;

      &-leftText {
        font-size: 20px;
        font-family: AlibabaPuHuiTi-2-65-Medium;
        font-weight: 400;
        background: linear-gradient(180deg, #DFF7FF 0%, #00C0FF 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        margin-left: 53px;
        margin-bottom: 15px;
      }

      &-rightText {
        font-size: 14px;
        font-family: Alibaba PuHuiTi 2-55 Regular, Alibaba PuHuiTi 20;
        font-weight: normal;
        color: rgba(255, 255, 255, 0.7);

      }
    }

    &-content {
      width: 367px;
      height: 202px;
      margin-top: 20px;
    }
  }

  &-duty {
    display: flex;
    flex-direction: column;

    /* 水平居中 */
    cursor: pointer;
    width: 411px;
    height: 317px;
    background-image: url("../../assets/images/home/bg_emphasis.png");
    background-size: 100% 100%;

    &-content {
      width: 320px;
      height: 43px;
      margin-top: 20px;
      margin-left: 22px;
      display: flex;
      justify-content: space-between;

      &-zhi {
        width: 74px;
        height: 43px;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: normal;
        color: #FFFFFF;
        display: flex;
        justify-content: space-between;
        align-items: center;

        &-img {
          width: 38px;
          height: 38px;
          background-image: url("../../assets/images/home/ren1.png");
          background-size: 100% 100%;
        }

        &-img2 {
          width: 38px;
          height: 38px;
          background-image: url("../../assets/images/home/ren2.png");
          background-size: 100% 100%;
        }

        &-img3 {
          width: 38px;
          height: 38px;
          background-image: url("../../assets/images/home/ren3.png");
          background-size: 100% 100%;
        }
      }
    }
  }

}

.userFlex {
  scrollbar-width: auto;
  /* firefox */
  -ms-overflow-style: auto;
  /* IE 10+ */
  overflow-y: auto;
  //height: 175px;
}
</style>